<template>
  <base-echart :id="id" ref="chartRef" />
</template>
<script>
import { onMounted, reactive, watch } from 'vue'
import BaseEchart from '@/components/ecahrt/BaseEchart'
import { option } from './options/word-cloud'
import { toRefs } from '@vueuse/core'

export default {
  name: 'WordCloud',
  components: {
    BaseEchart,
  },
  props: {
    id: {
      type: String,
      default: 'word-cloud',
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  setup(props) {
    const RData = reactive({
      chartRef: null,
    })

    onMounted(() => {
      initEcharts()
    })

    watch(
      () => props.data,
      () => {
        initEcharts()
      }
    )

    const initEcharts = () => {
      if (!option || !props.data.length) return
      option.series[0].data = props.data
      RData.chartRef.chart.setOption(option)
    }

    return {
      ...toRefs(RData),
    }
  },
}
</script>
